<template>
	<div class="vehiWrap">
		<div class="header">
			<div class="searWrap">
				<i class="searchIcon"></i>
				<input type="text" v-model="keyword" placeholder="搜索司机／手机号／车船号">
				<div class="searBtn" @click="toSearch()">搜索</div>
			</div>
		</div>
		<div class="container">
			<div class="tabWrap">
				<table width="100%" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
						<tr v-for='item in list' :key='item.guid' @click = 'toChecked(item)'>
							<td class="fir">
								<div class="magWrap">
								  <input class="magic-radio" type="radio" name="radio" :id="item.guid" v-bind:checked="checkedId == item.guid">
								  <label :for="item.guid"></label>
								</div>
							</td>
							<td>{{item.userName}}</td>
							<td>{{item.userCode}}</td>
							<td>{{item.vehicleNum}}</td>
							<td class="more" @click="moreInfo(item)">更多</td>
						</tr>
				</table>
			</div>
			<!--底部判断是加载图标还是提示“全部加载”-->
			<div class="more_loading">
				<div v-show="showLoading">
					<mt-spinner type="snake" color="#00ccff" :size="10"></mt-spinner>
					<span>正在加载</span>
				</div>
				<span v-show="showALlLoad">已全部加载</span>
			</div>
  			<!--
  			<div>
	  			<div>
				  <input class="magic-checkbox" type="checkbox" name="layout" id="1">
				  <label for="1">Normal</label>
				</div>
				<div>
				  <input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
				  <label for="2">Checked</label>
				</div>

				<div>
				  <input class="magic-checkbox" type="checkbox" name="layout" id="3" disabled="disabled">
				  <label for="3">
				    Disabled
				  </label>
				</div>

				<div>
				  <input class="magic-checkbox" type="checkbox" name="layout" id="4" checked disabled="disabled">
				  <label for="4">Checked && Disabled</label>
				</div>

				<div>
				  <input class="magic-radio" type="radio" name="radio" id="11">
				  <label for="11">Normal</label>
				</div>

				<div>
				  <input class="magic-radio" type="radio" name="radio" id="22" checked>
				  <label for="22">Checked</label>
				</div>

				<div>
				  <input class="magic-radio" type="radio" id="33" disabled="disabled">
				  <label for="33">Disabled</label>
				</div>

				<div>
				  <input class="magic-radio" type="radio" id="44" disabled="disabled" checked>
				  <label for="44">Checked && Disabled</label>
				</div>
			</div> -->
		</div>
		<div class="foot">
			<ul class="clearfix">
				<li @click="delet">
					<p>删除</p>
				</li>
				<li class="edit" @click="edit()">
					<p>编辑</p>
				</li>
				<li class="add" @click="add()">
					<p>新增车船</p>
				</li>
			</ul>
		</div>
		<!-- 查看更多 -->
		    <mt-popup v-model="popupVisible" popup-transition="popup-fade">
            <mt-vehicleTem :vehiInfo="vehiInfo" @upup="change"></mt-vehicleTem>
        </mt-popup>
        <!-- 新增车船 -->
        <mt-popup v-model="addVehileShow" popup-transition="popup-fade">
	    	<div class="addVehicleInfo">
			  <div class="header">
			  	<span v-show="editOradd == 'add'">新增车船</span>
			  	<span v-show="editOradd == 'edit'">编辑信息</span>
			  	<i @click="addVehileShow=false">×</i></div>
			  <div class="hr"></div>
			  <div class="cont">
			    <ul>
			      <li>
			        <span>司机：</span>
			        <input type="text" placeholder="请输入司机名称" v-model="editRes.userName" :class="{red:editRes.userName == '' && click}">
			      </li>
			      <li>
			        <span>手机号：</span>
			        <input type="text" placeholder="请输入手机号" v-model="editRes.userCode" :class="{red:editRes.userCode == '' && click}">
			      </li>
			      <li>
			        <span>身份证：</span>
			        <input type="text" placeholder="请输入身份证" v-model="editRes.cardId" :class="{red:editRes.cardId == '' && click}">
			      </li>
			      <li>
			        <span>车船号：</span>
			        <input type="text" placeholder="请输入车船号" v-model="editRes.vehicleNum" :class="{red:editRes.vehicleNum == '' && click}">
			      </li>
			      <li>
			        <span>车船类型：</span>
			        <!-- <input type="text" placeholder="请输入车船类型" :value="editRes.vehicleTypeName"> -->
			        <select v-model="editRes.vehicleType" :class="{red:editRes.vehicleType == ''}">
			        	<option value="10">车辆</option>
			        	<option value="20">船舶</option>
			        </select>
			      </li>
			     <!--  <li v-show="editOradd == 'edit'">
			        <span>创建时间：</span>
			        <input type="text" :value="editRes.createDate" placeholder="请输入时间" readonly @click="openStartPicker">
			      </li> -->
			    </ul>
			  </div>
			  <div class="backBtn">
			    <a href="javascript:;" @click='sure'>确定</a>
			  </div>
			</div>
        </mt-popup>
        <!-- 底部打开日期 -->
        <mt-datetime-picker
        ref="startPicker"
        type="datetime"
        v-model="startPickerValue"
        @confirm="start">
      </mt-datetime-picker>
	</div>
</template>
<script type="text/ecmascript-6">
import Vue from "vue";
import ApiService from "@/services/API-servies";
import VehicleTem from "../public/vehicleInfo.vue";
import {
  InfiniteScroll,
  Spinner,
  Popup,
  DatetimePicker,
  MessageBox
} from "mint-ui";
Vue.use(InfiniteScroll);
export default {
  data() {
    return {
      list: [],
      sortFlog: true, //默认是按照正序价格排列
      priceChecked: "all", //默认选中的价格范围
      busy: true, //默认允许滚动执行loadMore函数
      pageNo: 1, //默认分页为第一页
      pageSize: 10, //默认每页显示8条数据
      flag: false, //默认没有分页
      showLoading: true,
      showALlLoad: false,
      popupVisible: false, //显示弹框
      addVehileShow: false, //新增车船
      vehiInfo: {},
      startVal: "",
      startPickerValue: new Date(),
      editOradd: "",
      checkedId: "",
      checkedInfo: "",
      keyword:'', //关键字搜索
      editRes: {
        userName: "",
        userCode: "",
        cardId: "",
        vehicleNum: "",
        vehicleType: "20",
        createDate: ""
      },
      click:false
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    setTimeout(() => {
      if (this.$isBrower.isAndroid) {
      } else if (this.$isBrower.isIos) {
        this.setIosTitleType();
      }
    }, 0);
  },
  methods: {
    getList(flag) {
      this.showLoading = true;
      this.showALlLoad = false;
      ApiService.travelUser
        .list({
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          keyword:this.keyword,
        })
        .then(res => {
          this.showLoading = true;
          if (flag) {
            //判断是否通过分页
            this.list = this.list.concat(res.data.list); //分页数据追加到这个list里面
            if (res.data.list.length < 10 ) {
              //判断数是否加载完成，就让数据截停
              this.busy = true;
              this.showLoading = false;
              this.showALlLoad = true;
            } else {
              this.busy = false;
            }
          } else {
            this.list = res.data.list;
            this.busy = false;
            if(res.data.list.length<10){
              this.showLoading = false;
              this.showALlLoad = true;
            }
          }
        });
    },
    loadMore: function() {
      this.busy = true;
      setTimeout(() => {
        this.pageNo++;
        this.getList(true);
      }, 10);
    },
    //加载车船信息模板
    moreInfo(data) {
      this.vehiInfo = data;
      this.popupVisible = true;
    },
    //子组件传递关闭弹窗
    change(msg) {
      this.popupVisible = msg;
    },
    //新增车船保存
    sure() {
      this.click = true;
      let ready = true;
      let _params = {
        guid:this.checkedId,
        vehicleNum:this.editRes.vehicleNum,
        userCode:this.editRes.userCode,
        userName:this.editRes.userName,
        cardId:this.editRes.cardId,
        vehicleType:this.editRes.vehicleType,
      }
      for(let item in _params){
        if(_params[item] == '' && item != 'guid'){
          ready = false
        }
      }
      if(!ready){
        return
      }
      
      if(this.editOradd == "edit"){
        ApiService.travelUser.modify(
          _params
        ).then((res) => {
          if (res.meta.retCode === '0') {
            MessageBox('提示', '操作成功');
            location.reload()

          }
        });
      }else{
        ApiService.travelUser.add(
          _params
        ).then((res) => {
          if (res.meta.retCode === '0') {
            MessageBox('提示', '操作成功');
           location.reload()

          }
        });
      }

    },
    openStartPicker() {
      this.$refs.startPicker.open();
    },
    start(value) {
      let start = this.$moment(value).format("YYYY-MM-DD HH:mm");
      this.startVal = start;
    },
    edit() {
      if (!this.checkedId) {
        MessageBox("请选择一条司机");
      } else {
        this.addVehileShow = true;
        this.editOradd = "edit";
        this.editRes = this.checkedInfo;

        console.log(this.editRes);
      }
    },
    add() {
      this.editOradd = "add";
      this.addVehileShow = true;
      this.editRes = {
        userName: "",
        userCode: "",
        cardId: "",
        vehicleNum: "",
        vehicleType: "20",
        createDate: ""
      }
    },
    delet() {
      let _guid = this.checkedId;
      if (!this.checkedId) {
        MessageBox("请选择一条司机");
      } else {
        MessageBox({
          title: "",
          message: "确认删除该条信息吗？",
          showCancelButton: true
        }).then(action => {
          if (action == 'confirm') {
            ApiService.travelUser.del({
              guid: Number(_guid)*1
            }).then((res) => {
              if (res.meta.retCode === '0') {
                MessageBox('提示', '操作成功');
                this.toSearch();
              }
            });
          } else if (action == 'cancel') {
            console.log('取消')
          }
        })
      }
    },
    toChecked(checkedInfo) {
      this.checkedId = checkedInfo.guid;
      this.checkedInfo = checkedInfo;
    },
    //ios 设置头部信息
    setIosTitleType() {
      let params = {
        isReturn: true,
        isSearch: false,
        isTitleSegment: false
      };
      this.$bridge.callhandler("needBarButton", params, data => {});
    },
    toSearch(){
      this.list = [];
      this.pageNo = 1;
      this.getList();
    }
  },
  filters: {},
  components: {
    MtSpinner: Spinner,
    MtVehicleTem: VehicleTem,
    MtPopup: Popup,
    MtDatetimePicker: DatetimePicker
  }
};
</script>

<style lang="less" rel="stylesheet/less">
@import "~common/less/variable";
.vehiWrap {
  .mint-popup {
    border-radius: 20px;
    overflow: hidden;
  }
  .header {
    background: #fff;
    padding: 20px;
    .searWrap {
      position: relative;
      height: 72px;
      margin: 0 auto;
      padding-left: 30px;
      background: #f7f7f7;
      border-radius: 100px;
      overflow: hidden;
      border: 1px solid #d0d0d0;
      & > * {
        display: inline-block;
        line-height: 72px;
      }
      .searchIcon {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: url(../../common/imgs/searIcon.png) no-repeat 0 0;
        background-size: 100%;
        vertical-align: middle;
        margin-right: 10px;
      }
      input {
        width: 540px;
        border: none;
        background: transparent;
        font-size: 24px;
      }
      ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #999;
      }
      :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
      }
      ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
      }
      :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #999;
      }
      .searBtn {
        background: @blue;
        color: #fff;
        width: 120px;
        text-align: center;
        position: absolute;
        right: 0;
      }
    }
  }
  .container {
    padding-bottom: 100px;
    .tabWrap {
      padding: 0 40px;
      background: #fff;
      table {
        margin-top: 14px;
        font-weight: 400;
        color: #666;
        tr {
          padding: 0 20px;
          border-bottom: 1px solid #ccc;
          td {
            text-align: center;
            padding: 13px 0;
            &.more {
              color: @blue;
            }
            .magWrap {
              height: 22px;
              label {
                display: block;
              }
            }
          }
          .fir {
            width: 20px;
          }
        }
      }
    }
  }
  .foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    ul {
      li {
        padding: 28px 0;
        float: left;
        text-align: center;
        width: 33.3%;
        font-size: 30px;
        font-weight: 400;
        color: #999;
        line-height: 36px;
      }
      .edit p {
        border-left: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;
        color: #4085f9;
        margin: 0 auto;
        width: 100%;
      }
      .add {
        color: #fff;
        background: @blue;
      }
    }
  }
  .more_loading {
    line-height: 40px;
    padding: 10px 0;
    text-align: center;
    .mint-spinner-snake {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .addVehicleInfo {
    text-align: center;
    position: relative;
    .header > span {
      font-weight: 500;
      font-size: 36px;
      color: #000;
    }
    .header {
      i {
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 20px;
        right: 40px;
        font-size: 50px;
        font-weight: 800;
      }
    }
    .hr {
      height: 2px;
      background: #ccc;
    }
    .cont {
      margin-top: 20px;
      li {
        span {
          display: inline-block;
          width: 146px;
          font-size: 28px;
        }
        input,
        select {
          padding-left: 10px;
          display: inline-block;
          width: 300px;
          border: 2px solid #ccc;
          font-size: 28px;
          line-height: 60px;
          border-radius: 8px;
          &.red{
            border: 2px solid red;
          }
        }
        select {
          width: 312px;
          height: 56px;
          background: #fff;
        }
      }
    }
    .backBtn {
      a {
        display: inline-block;
        background: @blue;
        color: #fff;
        width: 240px;
        border-radius: 10px;
        font-size: 36px;
        margin: 30px 0;
      }
    }
  }
  .mint-datetime {
    width: 100%;
    border-radius: 0;
  }
}
</style>















